<template>
    <div class="forget">
        <div>
            <div class="title">找回密码</div>
            <div class="phone">
                <el-input class="ipt" @input="phone" :prefix-icon="PhoneFilled" type="number" v-model="userinfo.phone"
                    placeholder="手机号" size="default"></el-input>
                <el-button :plain="true" class="btn" type="primary" size="default" @click="yzm">获取验证码</el-button>
            </div>
            <div class="code">
                <el-input style="width: 10vw;" @input="code" type="number" v-model="userinfo.code" placeholder="验证码"
                    size="default"></el-input>
            </div>
            <div class="password">
                <el-input style="margin: 1vw 0;" :prefix-icon="Lock" maxlength="12" type="password"
                    v-model="userinfo.password" placeholder="输入密码" size="default"></el-input>
                <el-input :prefix-icon="Lock" maxlength="12" type="password" v-model="againpass" placeholder="确认密码"
                    size="default"></el-input>
            </div>
            <div class="btn">
                <el-button type="primary" size="default" @click="confirm">修改</el-button>
                <el-button type="primary" size="default" @click="backlogin">登录</el-button>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PhoneFilled, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import useUserStore from '@/store/module/user'
import { ElMessage } from 'element-plus';
let userstore = useUserStore()
let $emit = defineEmits(["backlogin"])
const userinfo = reactive<any>({
    code: '',
    phone: '',
    password: ''
})
let tempcode = ref(0)
let againpass = ref('')
const phone = (e: any) => {
    console.log(e)

    if (e.length > 11) {
        userinfo.phone = e.slice(0, 11)

    }
}
const code = (e: any) => {

    if (e.length > 6) {
        userinfo.code = e.slice(0, 6)

    }
}
//回登录
const backlogin = () => {
    $emit("backlogin")
}
const yzm = () => {
    setTimeout(() => {
        tempcode.value = Math.floor(Math.random() * 10000)
        userinfo.code = tempcode.value
    }, 2000);

}
//确认修改
const confirm = async () => {
    if (againpass.value !== userinfo.password) {
        ElMessage({
            message: '两次密码不一致',
            type: 'error'
        })
        return;
    }
    if (userinfo.code == '' || userinfo.code != tempcode.value) {
        ElMessage({
            message: '验证码错误',
            type: 'error'
        })
        return;
    }
    console.log(userinfo)
    try {
        await userstore.forgetpass(userinfo)

        backlogin()
    } catch (error) {
        ElMessage({
            message: '修改失败',
            type: 'error'
        })
    }
}
</script>

<style lang="scss" scoped>
@keyframes forget {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }

}

.forget {
    padding: 1vw;
    animation: forget 0.5s;
    animation-fill-mode: forwards;
    width: 20vw;
    // height: 35vh;
    backdrop-filter: blur(20px);
    opacity: 0.8;
    display: flex;
    // justify-content: space-around;
    flex-direction: column;
    align-items: center;
    // justify-content: center;

    ::v-deep .el-input {

        input[type="number"]::-webkit-inner-spin-button {
            display: none;
        }
    }

    .title {
        text-align: center;
        color: #fff;
        font-family: '楷体';
        font-size: 1.5vw;
    }

    .password {
        margin: 1vw 0;
    }

    .phone {
        display: flex;
        margin: 1vw 0;

    }
}
</style>